<template>
  <div>
      <h1>登陆页面</h1>

      <!-- 顶部栏 -->
      <van-nav-bar
        class="my-nav-bar"
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
       />

        <!-- from表单插件 -->
        <!-- 他这个表单很烦 , 必须要有name 属性 ,可以不跟v-model不一样 , 因为事件函数会自动获取这个表单里面的name值 和 value 值 -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="phone"
            required
            name="phone"
            type="tel"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
                      { required: true, message: '请填写手机号' },
                      {
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '手机号格式不对'
                      }
                    ]"
          />
          <van-field
            v-model="password"
            required
            name="password"
            label="验证码"
            placeholder="验证码"
            :rules="[
                      { required: true, message: '验证码没有写哦!' },
                      { pattern: /\d{6}/, message: '验证码格式不对' }
                    ]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit"
            :disabled='isLoading'
            :loading='isLoading'
            loading-type="spinner"
            >提交</van-button>
          </div>
        </van-form>
  </div>
</template>

<script>
// 导入axios 中间层
import {grtLogin} from './user.js'
//导入 token 中间件
import {saveToken} from '../../utils/token.js'

export default {
  
    data() {
        return {
            phone: "13912345678",
            password: "246810",
            isLoading:false,
        }
    },  
    methods: {
        onSubmit(values) {
        console.log('submit', values);
        //发送登录请求
                this.isLoading = true
               grtLogin(values.phone, values.password).then(res => {
                 console.log(res)
                 // Toast 轻提示
                 this.$toast.success('登陆成功')
                //  当请求成功的时候 , 就将token令牌保存到硬盘
                // 调用方法, 传入参数
                saveToken(res.data.data)
                // bc保存成功后 , 就跳转到首页
                this.$router.push({path:'/home'})  //这他妈就是个路由
               }).catch(err=>{
                 this.$toast.fail('账号或密码失败')
               }).then(res=>{
                 setTimeout(()=>{
                 this.isLoading = false
                 },500)
})
      },
    },
}
</script>





<style lang="less">
// less 就是可以把样式重叠起来
    .my-nav-bar{
        .van-nav-bar__content {
            background-color: skyblue;
            .van-nav-bar__title {
                color: #fff;
            }
            .van-nav-bar__left {
                .van-nav-bar__arrow {
                    color: #fff;
                }
                .van-nav-bar__text {
                    color: #fff;

                }
            }
        }
    }
</style>>
